<!--
 * @Author: ljc
 * @Date: 2025-01-10 13:35:31
 * @LastEditors: g05047
 * @LastEditTime: 2025-01-14 15:43:23
 * @Description: 表单管理、流程管理、主页管理 左侧树
-->
<template>
  <div class="aside_header">
    <div class="header_l_content">
      <span>{{title}}</span>
      <el-icon @click="handleSet" v-if="enableSet">
        <Setting />
      </el-icon>
    </div>
    <RkTreePanel :="treeAttrs"
      :key="refreshKey"
      @currentChange="handleTreeChange" />
  </div>
  <CategorySetDrawer ref="categorySetRef"
    :title="drawerTitle"
    :funcType="funcType" />
</template>
<script setup>
import CategorySetDrawer from '@/components/classify-tree/src/drawer/CategorySetDrawer.vue'
import { RkTreePanel } from '@/components/tree';

const props = defineProps({
  //左侧树标题
  title: {
    type: String,
    default: '表单分类'
  },
  // 搜索栏标题
  searchTitle: {
    type: String,
    default: '表单模板'
  },
  // 搜索栏是否显示
  showTitle: {
    type: Boolean,
    default: false
  },
  // 分类状态 1-表单 2-流程,3-主页
  funcType: {
    type: String,
    default: '1',
  },
  // 右侧抽屉标题
  drawerTitle: {
    type: String,
    default: '表单分类管理'
  },
  // 启用配置分类功能：默认开启
  enableSet: { type: Boolean, default: true }
})
const { searchTitle, showTitle } = props
const treeAttrs = reactive({
  serverConfig: {
    url: '/classify/getSysClassifyTree',
    params: { type: props.funcType }, // type: 1-表单 2-流程
  },
  treeTitle: searchTitle,
  showTitle
})
const emits = defineEmits(['currentChange'])
const refreshKey = ref(0);
/**
 * 
 * @param 刷新左侧树 
 */
const handleReloadTree = () => {
  refreshKey.value += 1;
}
provide("reloadTree", handleReloadTree)
/**
 * 树节点变换
 * @param data 选中节点数据
 * @param node 选中节点
 */
const handleTreeChange = (data, node) => {
  emits('currentChange', data, node);
}
const categorySetRef = ref(null)
/**
 * 打开设置抽屉
 * 
 * @param item 功能枚举项
 */
const handleSet = () => {
  categorySetRef.value.handleOpen({
    type: 'add',
  })
}
onUnmounted(() => {
  refreshKey.value = 0
})
</script>

<style lang="scss" scoped>
.aside_header {
	overflow: hidden;
	height: 100%;
	.header_l_content {
		height: 50px;
		display: flex;
		padding: 0 10px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 18px;
		border-bottom: 1px solid #dadada;
		span {
			font-weight: 700;
		}
		.el-icon {
			color: var(--el-color-primary);
			cursor: pointer;
		}
	}
}
</style>